<!-- 快捷评语 -->
<template>
	<view>
		<!-- 考试名称列表 -->
		<u-popup :show="show" :round="8">
			<view class="quick-modal">
				<view class="quick-modal-title">
					<view class="modal-title">请选择考试</view>
					<view class="modal-cancel" @click="cancel">取消
					</view>
				</view>
				<view class="modal-content">
					<view class="add-quick" @click="addName">
						<u-icon name="plus" :bold="true" color="#4174FD"
							size="18">
						</u-icon>
						<text style="margin-left: 10rpx;">没有合适，选择新建</text>
					</view>

					<view class="quick-list">
						<view class="quick-item" v-for="(item, index) in list"
							:key="item.name" @click="checkItem(item)">				
								<view class="name">{{item.name}}</view>
								<view class="update-time">
									最近更新：{{item.updateTime}}
								</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>

		<u-modal :show="addItem" title="考试名称" showCancelButton
			confirmColor="#4174fd" @confirm="newNameOk" @cancel="newNameCancel">
			<view class="slot-content" style="width: 100%;">
				<u-input placeholder="请输入考试名称(不超过20个字)" border="surround" style="border: 1px solid #d6d7d9;"
					v-model="newName"></u-input>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		gradeSamePlanList,
	} from '@/pages/achievement/api/teacher.js'
	import dayjs from 'dayjs'
	export default {

		props: {
			visible: {
				type: Boolean,
				default: false
			},
			postData: {
				type: Object
			}
		},
		watch: {
			visible(newVal) {
				if (newVal) {
					this.getList()
				}
				this.show = newVal
			}
		},
		data() {
			return {
				show: false,
				addItem: false,
				newName: '',
				list: [],
				newNameList: []
			}
		},
		methods: {
			checkItem(item) {
				this.$emit('change', { item, hide: false })
			},
			cancel() {
				this.$emit('change', { item: {}, hide: false })
			},
			addName() {
				this.addItem = true
				this.cancel()
			},

			newNameOk() {
				this.newNameList.push({
					name: this.newName,
					examId: Math.random(),
					updateTime: dayjs(new Date()).format('YYYY-MM-DD HH:mm')
				})
				this.$emit('show')
				this.newNameCancel()
			},
			newNameCancel() {
				this.newName = ''
				this.addItem = false
			},

			async getList() {
				const data = {...this.postData}
				console.log(data)
				const data1 = await gradeSamePlanList(data)
				console.log(data1)
				this.list = data1?.data?.list ? data1?.data?.list : [],
				this.list = [...this.list, ...this.newNameList]
			},

		}
	}
</script>

<style lang="scss" scoped>
	.quick-modal {
		.quick-modal-title {
			position: relative;
			// width: 100%;
			height: 108rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0 30rpx;
			font-size: 30rpx;
			color: #333;
			margin-bottom: 24rpx;

			.modal-title {
				font-size: 34rpx;
				font-weight: 500;
			}

			.modal-cancel {
				position: absolute;
				right: 30rpx;
			}
		}

		.modal-content {
			padding: 0 30rpx;

			.add-quick {
				height: 108rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #4174FD;
			}

			.quick-list {
				height: 540rpx;
				overflow-y: scroll;

				.quick-item {
					box-sizing: border-box;
					position: relative;
					height: 146rpx;
					text-align: center;
					padding: 32rpx 0;
					
					.name{
						height: 42rpx;
						font-size: 30rpx;
						text-align: center;
						color: #333333;
						line-height: 42rpx;
						margin-bottom: 4rpx;
					}
						
					.update-time{
						height: 36rpx;
						font-size: 26rpx;
						font-weight: 400;
						text-align: center;
						color: #999999;
						line-height: 36rpx;
					}


				}

			}

			.add-form {
				height: 108rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

			}
		}
	}
</style>
